<template>
  <div>
    <base-page ref="basePage" :basepage="basePage">
      <template slot="insertAndEdit">
        <el-upload
          class="upload-demo"
          action="/api/fileUtils/upload"
          :limit="1"
          :on-exceed="handleExceed"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">请上传一张标题图片(只能上传jpg/png文件)</div>
        </el-upload>
      </template>
      <el-table-column slot="table" label="图片">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src='GLOBAL.BASE_URL + "image/" +scope.row.pic'
          ></el-image>
        </template>
      </el-table-column>
    </base-page>
  </div>
</template>
<script>
import BasePage from "../BasePage.vue";
export default {
  components: {
    "base-page": BasePage,
  },
  data() {
    return {
      basePage: {
        // URL
        url: "goodsOperation",
        // 查询条件
        searchConf: [[]],
        buttonConf: {
          insertShow: true,
          deleteShow: true,
        },
        // table列
        tableColumnConf: {
          columns: [
            { prop: "goodName", label: "商品名称" },
            { prop: "goodNum", label: "可兑换数量" },
            { prop: "laveNum", label: "剩余数量" },
            { prop: "requiredNum", label: "兑换所需积分" },
            { prop: "goodType", label: "商品类型" },
            { prop: "available", label: "是否有效" },
            { prop: "createName", label: "创建人" },
            { prop: "createTime", label: "创建时间" },
          ],
          operation: {
            state: true,
            defs: [],
          },
        },
        detailConf: {
          title: "",
          data: [],
        },
        // 新增修改form表单设置
        formConf: {
          formData: {},
          width: "50%",
          title: "",
          data: [
            {
              title: "商品名称",
              type: "input",
              prop: "goodName",
            },
            {
              title: "可兑换数量",
              type: "input",
              prop: "goodNum",
            },
            {
              title: "兑换所需积分",
              type: "input",
              prop: "requiredNum",
            },
            {
              title: "商品类型",
              type: "select",
              prop: "goodType",
              data: [
                { value: "1", label: "虚拟" },
                { value: "0", label: "实物" },
              ],
            },
            {
              title: "是否有效",
              type: "select",
              prop: "available",
              data: [
                { value: "1", label: "有效" },
                { value: "0", label: "无效" },
              ],
            },
          ],
          rules: {},
        },
      },
      pic: "",
    };
  },
  methods: {
    uploadSuccess(res, file) {
      if (res.result == "SUCCESS") {
        this.pic = res.detail;
      } else {
        this.$message.error("图片插入失败");
      }
    },
    uploadError() {
      this.$message.error("图片插入失败");
    },
    handleExceed(files, fileList) {
      this.$message.warning("当前限制选择 1 个文件");
    },
    event(event) {
      switch (event) {
        case "insert": {
          debugger;
          var data = this.$refs.basePage.getFormData();
          data.pic = this.pic;
          break;
        }
      }
    },
    selectChange(type, pro, value) {},
    formatter(data, prop, index) {
      switch (prop) {
        default: {
          return data;
        }
      }
    },
  },
  activated: function () {},
};
</script>
<style>
</style>